<style>
  .new-generation{
    margin-bottom: 0;
  }
  .empowering-generation {
    padding: 80px 0 10px;
    position: relative;
    overflow: hidden;
}
  .empowering-generation .generation-banner {
    display: flex;
    align-items: center;
    padding-top: 68px;
    max-width: 82%;
    margin: 0 auto;
 }
  .empowering-generation .bg-image {
    width: 100%;
    height: 100%;
    padding: 0 20px;
 }
 .empowering-generation .text{
   position: relative;
    font-size: 36px;
    font-weight: 700;
    line-height: 48px;
    color: #000;
 }
 .empowering-generation .text_1{
    position: relative;
 }
 .empowering-generation .icon-line{
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: -12px;
 }
 .empowering-generation .svg{
  display: block;
  position: absolute;
  z-index: -1;
  right: 12%;
  bottom: -25px;
 }
 .empowering-generation .richtext {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.empowering-generation .richtext p{
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
}


 @media screen and (max-width:990px) {
  .empowering-generation {
    padding: 80px 0;
  }
  .empowering-generation .generation-banner {
    padding-top: 32px;
    max-width: 100%;
  }
  .empowering-generation .bg-image {
    padding: 0 1.5px;
}
  .empowering-generation .text {
      font-size: 24px;
      line-height: 32px;
      display: block;
    }
    .empowering-generation .icon-line svg{
      width: 65%;
    }
    .empowering-generation .svg {
      display: block;
      position: absolute;
      z-index: -1;
      right: -20px;
      bottom: 27px;
    }
    .empowering-generation .svg svg{
      width: 91px;
      height: 91px;
    }
    .empowering-generation .richtext p {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 0;
  }
 }
</style>

<div class="empowering-generation">
  <div class="page-width">
    {% if section.settings.text != blank %}
    <div class="text center">
      <div class="title-icon">
          {{ section.settings.text }}
          <span class="text text_1">{{ section.settings.text_1 }}</span>
        </div>
    </div>
    {% endif %}

    {% if section.settings.richtext != blank %}
      <div class="richtext">{{ section.settings.richtext }}</div>
    {% endif %}

    <div class="generation-banner">
      {% for block in section.blocks %}
        <div class="bg-image">
          <div class="pc-banner image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
          {% if block.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}
        >
          {%- if block.settings.image != blank -%}
            <img
              srcset="{%- if block.settings.image.width >= 165 -%}{{ block.settings.image | img_url: '165x' }} 165w,{%- endif -%}
                {%- if block.settings.image.width >= 323 -%}{{ block.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                {%- if block.settings.image.width >= 360 -%}{{ block.settings.image | img_url: '360x' }} 360w,{%- endif -%}
                {%- if block.settings.image.width >= 750 -%}{{ block.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                {%- if block.settings.image.width >= 1070 -%}{{ block.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
                {%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
                {{ block.settings.image | img_url: 'master' }} {{ block.settings.image.width }}w"
              src="{{ block.settings.image | img_url: '1500x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ block.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
              alt="{{ block.settings.image.alt | escape }}"
              loading="lazy"
              width="{{ block.settings.image.width }}"
              height="{{ block.settings.image.height }}"
            >
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
          </div>
          <div class="mb-banner image-with-text__media image-with-text__media--{{ block.settings.height }} {% if block.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
          {% if block.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: block.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
        >
          {%- if block.settings.image_mobile != blank -%}
            <img
              srcset="{%- if block.settings.image_mobile.width >= 165 -%}{{ block.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 323 -%}{{ block.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 360 -%}{{ block.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 535 -%}{{ block.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 750 -%}{{ block.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 1070 -%}{{ block.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
                {%- if block.settings.image_mobile.width >= 1500 -%}{{ block.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                {{ block.settings.image_mobile | img_url: 'master' }} {{ block.settings.image_mobile.width }}w"
              src="{{ block.settings.image_mobile | img_url: '1500x' }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
              alt="{{ block.settings.image_mobile.alt | escape }}"
              loading="lazy"
              width="{{ block.settings.image_mobile.width }}"
              height="{{ block.settings.image_mobile.height }}"
            >
          {%- else -%}
            {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
          </div>
       </div>
      {% endfor %}
    </div>
  </div>
</div>




{% schema %}
{
  "name": "New generation",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width new-generation",
  "settings": [
    {
      "type": "text",
      "id": "text",
      "label": "text"
    },
    {
      "type": "text",
      "id": "text_1",
      "label": "Text 1"
    },
    {
      "type": "richtext",
      "id": "richtext",
      "label": "Richtext"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "image"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "Mobile image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "New generation",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}
